<template>  
    <div class="header-bar" :style="headerStyle">  
      <div class="back-container" @click="goBack">  
        <slot name="back">  
          <i class="back-icon"></i>  
          <span class="back-text">返回</span>  
        </slot>  
      </div>  
      <div class="title-container" v-if="title">  
        <slot name="title">{{title}}</slot>  
      </div>  
      <div class="actions-container">  
        <slot name="actions">  
          <!-- 这里可以放置操作按钮，默认不展示 -->  
        </slot>  
      </div>  
    </div>  
  </template>  
    
  <script>  
      import { mapState,mapActions } from 'vuex';  

  export default {  
    props: {  
      backgroundColor: {  
        type: String,  
        default: '#fff'  
      },  
      textColor: {  
        type: String,  
        default: '#333'  
      },
      title:{
        type:String,
        default:''
      },  
      isFixed: {  
        type: Boolean,  
        default: true  
      }  
    },  
    computed: {  
        // 使用 mapState 简化计算属性的创建  
      headerStyle() {  
        return {  
          backgroundColor: this.backgroundColor,  
          color: this.textColor,  
          position: this.isFixed ? 'fixed' : 'static',  
          top: this.isFixed ? '0' : 'auto',  
          left: this.isFixed ? '0' : 'auto',  
          width: '100%',  
          display: 'flex',  
          alignItems: 'center',  
          justifyContent: 'space-between',  
          padding: '10px',  
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',  
          zIndex: 999  
        };  
      }  
    },  
    methods: { 
        goBack() {  
            this.$emit("backEvent")
            this.$router.back();
        }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .header-bar {  
    /* 这里可以添加一些全局样式，如果需要的话 */  
  }  
    
  .back-container {  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    
    .back-icon {  
      font-size: 20px;  
      margin-right: 5px;  
    }  
    
    .back-text {  
      /* 根据需要调整文本样式 */  
    }  
  }  
    
  .title-container {  
    flex-grow: 1;  
    text-align: center;  
    /* 根据需要调整标题样式 */  
  }  
    
  .actions-container {  
    display: flex;  
    align-items: center;  
    button {  
      margin-left:10px;  
      padding: 5px 10px;  
      background-color: #007aff;  
      color: #fff;  
      border: none;  
      cursor: pointer;  
      /* 根据需要调整按钮样式 */  
    }  
  }  
  </style>